<template>
  <div>
  <el-button style="margin-left: 62px" type="warning" @click="toAudit">审核</el-button>
  <el-table
    border
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="id"
      label="商户ID"
      width="120">
    </el-table-column>
    <el-table-column
      prop="name"
      label="商户名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="corporation"
      label="法人"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="type"
      label="类型"
      :formatter="formatType"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="status"
      :formatter="formatStatus"
      label="状态"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="userName"
      label="管理员"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="申请时间"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryForm.pageNo"
      :limit.sync="queryForm.pageSize"
      @pagination="getList"
    />
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible"  >
      <el-form  :model="checkForm"   label-width="100px" class="demo-ruleForm">
        <el-form-item label="商家类型" prop="type">
          <el-input readonly="readonly"  type="text" v-model="checkForm.type===1?'公司化公寓':'个人职业房东'"  ></el-input>
        </el-form-item>
        <el-form-item label="商户名称" prop="name">
          <el-input  readonly="readonly" type="text" v-model="checkForm.name" ></el-input>
        </el-form-item>
        <el-form-item label="法人" prop="corporation">
          <el-input  readonly="readonly" v-model="checkForm.corporation"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input  readonly="readonly" v-model="checkForm.address"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-input  readonly="readonly" v-model="checkForm.status===1?'审核通过':'审核不通过'"></el-input>
        </el-form-item>
        <el-form-item label="管理员" prop="userName">
          <el-input  readonly="readonly" v-model="checkForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="统一征信码" prop="zheng">
          <el-input  readonly="readonly" v-model="checkForm.zheng"></el-input>
        </el-form-item>
        <el-form-item label="营业执照" prop="url" disabled="true">
          <el-image :src="this.img" style="width: 120px;height: 150px;"></el-image>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="checkPass('ruleForm2')">通过</el-button>
          <el-button type="success" @click="checkPass('ruleForm2')">不通过</el-button>
          <el-button type="primary" @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import {listBusiness,getBusiness,addBusiness,updateBusiness,delBusiness } from "@/api/system/business";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import log from "../../monitor/job/log";
    export default {
        name: "index",
        data(){
          return{
            checkForm:[],
            dialogTableVisible:false,
            tableData:[],
            queryForm:{
              pageNo:1,
              pageSize:10
            },
            total:0,
            multipleSelection:[],
            img:''
          }
        },
      created() {
          this.getList();
      },
      methods: {
        checkPass(){
          updateBusiness(this.checkForm).then(res=>{
            this.$message({type:"success",message:res.msg})
            this.getList()
            this.dialogTableVisible=false
          }).catch(function (error) {
            this.$message({type:"error",message:res.msg})
            this.getList()
            this.dialogTableVisible=false
          })
        },
        goBack(){
          //this.$router.go(-1)
          this.dialogTableVisible=false
        },
        formatStatus(row) {
          if (row.status === 1) {
            return this.tableData.status = "审核通过";
          }
          return this.tableData.status = "审核不通过";
        },
        formatType(row) {
          if (row.type === 1) {
            return this.tableData.type = "公司化公寓";
          }
          return this.tableData.type = "个人职业房东";
        },
        handleSelectionChange(val) {
          console.log(val)
          this.multipleSelection = val;
          this.checkForm = this.multipleSelection[0]
          this.img = this.checkForm.url
          console.log("-=============="+this.checkForm.url)

        },
        //分页大小PageSize改变事件
        handleSizeChange(pageSize) {
          console.log(pageSize)
          this.queryForm.pageSize = pageSize;
          //根据分页和查询条件 ajax请求后台列表数据 给tabledata给分页组件的变量赋值
          this.getList();
        },
        handleCurrentChange(pageNo) {
          console.log(pageNo)
          this.queryForm.pageNo = pageNo;
          //根据分页和查询条件ajax请求后台列表数据 给tabledata 给分页组件的变量赋值
          this.getList();
        },
        getList() {
          listBusiness(this.queryForm).then(res => {
            this.total = res.data.total
            console.log(res)
            this.tableData = res.data.list
          })
        },
        toAudit() {
          if (this.multipleSelection.length > 1) {
            alert("只能选择一个");
            return;
          }
          if (this.multipleSelection.length<1){
            alert("请选择一个");
            return;
          }
          this.dialogTableVisible = true;
        }
      }
    }
</script>

<style scoped>
.demo-ruleForm{

}
</style>
